<template>
  <div class="ui-uploader-wrap">
    <div class="ui-uploader-sorts">
      <span>请选择素材分类</span>
      <div class="ui-select">
        <Select v-model="goodSort" style="width:200px">
          <Option
            v-for="item in sorts"
            :value="item.id"
            :key="item.id"
          >{{ item.category_name }}</Option>
        </Select>
      </div>
    </div>
    <div class="ui-uploader">
        <Form :label-width="80">
            <FormItem label="链接地址：">
                <Input search enter-button="确定"  v-model="soureLink" placeholder="请输入链接地址"  @on-search="addGoods"/>
            </FormItem>
        </Form>
    </div>
    <Spin size="large" fix v-if="loading"></Spin>
  </div>
</template>

<script>
import { getJDGoodsInfo } from '@/api/content/resource'
import Setting from '@/setting'
export default {
  name: 'ui-uploader',
  props: {
    sorts: {
      type: Array,
      default() {
        return []
      }
    },
  },
  watch: {},
  data() {
    return {
      goodSort: -1,
      soureLink: '',
      loading: false
    }
  },
  computed: {},
  methods: {
    handleSuccess(res) {
      this.$emit('on-success', {
        res,
        cid: this.goodSort
      })
    },
    addGoods () {
        if (this.soureLink) {
            var reg = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;
            if (!reg.test(this.soureLink)) {
                return this.$Message.warning('请输入以http开头的地址！');
            }
            let data = {
                link: this.soureLink,
                cid: this.goodSort
            }
            this.loading = true
            getJDGoodsInfo(data).then(res => {
              this.loading = false
                if (res.status === 200) {
                    var items = [
                        {
                            raw_title: res.data.raw_title,
                            pic_url: res.data.pic_url,
                            view_price: res.data.view_price,
                            detail_url: res.data.detail_url,
                        }
                    ];
                    this.soureLink = ''
                    this.handleSuccess(items)
                } else {
                    this.$Notice.error( {title: res.msg} )
                }
            }).catch(res => {
              this.loading = false
                this.$Message.error(res.msg);
            })
        } else {
            this.$Message.warning('请输入链接地址！');
        }
    },
  },
  mounted() {
    
  }
}
</script>
<style lang="scss">
.ui-uploader {
  .ivu-upload-select {
    display: block;
  }
  .ivu-icon {
    font-size: 48px;
  }
}
.ui-uploader--label,
.ui-uploader--tips {
  color: #999;
}
.ui-uploader--tips {
  margin-top: 6px;
}
</style>
<style lang="scss" scoped>
.ui-uploader-sorts {
  padding-bottom: 8px;
  display: flex;
  align-items: center;
  .ui-select {
    margin-left: 10px;
  }
}
.ui-uploader--inner {
  border: 1px dashed #d8d8d8;
  color: #6af;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
}
</style>
